<template>
  <div :class="`${prefixCls}-dom`" :style="getDomStyle"></div>
  <div v-click-outside="handleClickOutside" :style="getWrapStyle" :class="[prefixCls, getMenuTheme, { open: openMenu, mini: getCollapsed, bright: isThemeBright, },]" v-bind="getMenuEvents">
    <AppLogo :showTitle="false" :class="`${prefixCls}-logo`" />
    <LayoutTrigger :class="`${prefixCls}-trigger`" />
    <ScrollContainer>
      <ul :class="`${prefixCls}-module`">
        <li :class="[`${prefixCls}-module__item `, { [`${prefixCls}-module__item--active`]: item.path === activePath, },]" v-bind="getItemEvents(item)" v-for="item in menuModules" :key="item.path">
          <SimpleMenuTag :item="item" collapseParent dot />
          <Icon :class="`${prefixCls}-module__icon`" :size="getCollapsed ? 16 : 20" :icon="item.icon || (item.meta && item.meta.icon)" />
          <p :class="`${prefixCls}-module__name`">
            {{ t(item.name) }}
          </p>
        </li>
      </ul>
    </ScrollContainer>

    <div :class="`${prefixCls}-menu-list`" ref="sideRef" :style="getMenuStyle">
      <div v-show="openMenu" :class="[`${prefixCls}-menu-list__title`, { show: openMenu, },]">
        <span class="text"> {{ shortTitle }}</span>
        <Icon :size="16" :icon="getMixSideFixed ? 'ri:pushpin-2-fill' : 'ri:pushpin-2-line'" class="pushpin" @click="handleFixedMenu" />
      </div>
      <ScrollContainer :class="`${prefixCls}-menu-list__content`">
        <SimpleMenu :items="childrenMenus" :theme="getMenuTheme" mixSider @menuClick="handleMenuClick" />
      </ScrollContainer>
      <div v-show="getShowDragBar && openMenu" :class="`${prefixCls}-drag-bar`" ref="dragBarRef"></div>
    </div>
  </div>
</template>
<script lang="ts">
import type { Menu } from '/@/api/model/baseModel';
import type { CSSProperties } from 'vue';
import { computed, defineComponent, onMounted, ref, unref, watch } from 'vue';
import type { RouteLocationNormalized } from 'vue-router';
import { ScrollContainer } from '/@/components/Container';
import { SimpleMenu, SimpleMenuTag } from '/@/components/SimpleMenu';
import { Icon } from '/@/components/Icon';
import { AppLogo } from '/@/components/Application';
import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
import { useDragLine } from './useLayoutSider';
import { useGlobSetting } from '/@/hooks/setting';
import { useDesign } from '/@/hooks/web/useDesign';
import { useI18n } from '/@/hooks/web/useI18n';
import { useGo } from '/@/hooks/web/usePage';
import { SIDE_BAR_MINI_WIDTH, SIDE_BAR_SHOW_TIT_MINI_WIDTH } from '/@/common/enums/styleEnum';
import clickOutside from '/@/directives/clickOutside';
import { getChildrenMenus, getCurrentParentPath, getShallowMenus } from '/@/router/support/menu';
import { listenerRouteChange } from '/@/router/support/routeHelper';
import LayoutTrigger from '../trigger/index.vue';
import { useAppStore } from '/@/store/modules/app';

export default defineComponent({
  name: 'LayoutMixSider',
  components: {
    ScrollContainer,
    AppLogo,
    SimpleMenu,
    Icon,
    LayoutTrigger,
    SimpleMenuTag,
  },
  directives: {
    clickOutside,
  },
  setup() {
    let menuModules = ref<Menu[]>([]);
    const activePath = ref('');
    const childrenMenus = ref<Menu[]>([]);
    const openMenu = ref(false);
    const dragBarRef = ref<ElRef>(null);
    const sideRef = ref<ElRef>(null);
    const currentRoute = ref<Nullable<RouteLocationNormalized>>(null);
    const appStore = useAppStore();
    const isThemeBright = ref(false);

    const { prefixCls } = useDesign('layout-mix-sider');
    const go = useGo();
    const { t } = useI18n();
    const {
      getMenuWidth,
      getCanDrag,
      getCloseMixSidebarOnChange,
      getMenuTheme,
      getMixSideTrigger,
      getRealWidth,
      getMixSideFixed,
      mixSideHasChildren,
      setMenuSetting,
      getIsMixSidebar,
      getCollapsed,
    } = useMenuSetting();

    const { shortTitle } = useGlobSetting();

    useDragLine(sideRef, dragBarRef, true);

    const getMenuStyle = computed((): CSSProperties => {
      return {
        width: unref(openMenu) ? `${unref(getMenuWidth) - 60}px` : 0,
        left: `${unref(getMixSideWidth)}px`,
      };
    });

    const getIsFixed = computed(() => {
      /* eslint-disable-next-line */
      mixSideHasChildren.value = unref(childrenMenus).length > 0;
      const isFixed = unref(getMixSideFixed) && unref(mixSideHasChildren);
      if (isFixed) {
        /* eslint-disable-next-line */
        openMenu.value = true;
      }
      return isFixed;
    });

    const getMixSideWidth = computed(() => {
      return unref(getCollapsed) ? SIDE_BAR_MINI_WIDTH : SIDE_BAR_SHOW_TIT_MINI_WIDTH;
    });

    const getDomStyle = computed((): CSSProperties => {
      const fixedWidth = unref(getIsFixed) ? unref(getRealWidth) : 0;
      const width = `${unref(getMixSideWidth) + fixedWidth}px`;
      return getWrapCommonStyle(width);
    });

    const getWrapStyle = computed((): CSSProperties => {
      const width = `${unref(getMixSideWidth)}px`;
      return getWrapCommonStyle(width);
    });

    const getMenuEvents = computed(() => {
      return !unref(getMixSideFixed)
        ? {
          onMouseleave: () => {
            setActive(true);
            closeMenu();
          },
        }
        : {};
    });

    const getShowDragBar = computed(() => unref(getCanDrag));

    onMounted(async () => {
      menuModules.value = await getShallowMenus();
    });

    listenerRouteChange((route) => {
      currentRoute.value = route;
      setActive(true);
      if (unref(getCloseMixSidebarOnChange)) {
        closeMenu();
      }
    });

    function getWrapCommonStyle(width: string): CSSProperties {
      return {
        width,
        maxWidth: width,
        minWidth: width,
        flex: `0 0 ${width}`,
      };
    }

    // Process module menu click
    async function handleModuleClick(path: string, hover = false) {
      const children = await getChildrenMenus(path);
      if (unref(activePath) === path) {
        if (!hover) {
          if (!unref(openMenu)) {
            openMenu.value = true;
          } else {
            closeMenu();
          }
        } else {
          if (!unref(openMenu)) {
            openMenu.value = true;
          }
        }
        if (!unref(openMenu)) {
          setActive();
        }
      } else {
        openMenu.value = true;
        activePath.value = path;
      }

      if (!children || children.length === 0) {
        if (!hover) go(path);
        childrenMenus.value = [];
        closeMenu();
        return;
      }
      childrenMenus.value = children;
    }

    // Set the currently active menu and submenu
    async function setActive(setChildren = false) {
      const path = currentRoute.value?.path;
      if (!path) return;
      activePath.value = await getCurrentParentPath(path);
      // hanldeModuleClick(parentPath);
      if (unref(getIsMixSidebar)) {
        const activeMenu = unref(menuModules).find((item) => item.path === unref(activePath));
        const p = activeMenu?.path;
        if (p) {
          const children = await getChildrenMenus(p);
          if (setChildren) {
            childrenMenus.value = children;

            if (unref(getMixSideFixed)) {
              openMenu.value = children.length > 0;
            }
          }
          if (children.length === 0) {
            childrenMenus.value = [];
          }
        }
      }
    }

    function handleMenuClick(path: string) {
      go(path);
    }

    function handleClickOutside() {
      setActive(true);
      closeMenu();
    }

    function getItemEvents(item: Menu) {
      if (unref(getMixSideTrigger) === 'hover') {
        return {
          onMouseenter: () => handleModuleClick(item.path, true),
          onClick: async () => {
            const children = await getChildrenMenus(item.path);
            if (item.path && (!children || children.length === 0)) go(item.path);
          },
        };
      }
      return {
        onClick: () => handleModuleClick(item.path),
      };
    }

    function handleFixedMenu() {
      setMenuSetting({
        mixSideFixed: !unref(getIsFixed),
      });
    }

    // Close menu
    function closeMenu() {
      if (!unref(getIsFixed)) {
        openMenu.value = false;
      }
    }

    // update-begin--author:liaozhiyang---date:20240417---for：【QQYUN-8927】侧边折叠导航模式区分彩色模式
    watch(
      () => appStore.getProjectConfig.menuSetting,
      (menuSetting) => {
        isThemeBright.value = !!menuSetting?.isThemeBright;
      },
      { immediate: true, deep: true }
    );
    // update-end--author:liaozhiyang---date:20240417---for：【QQYUN-8927】侧边折叠导航模式区分彩色模式

    return {
      t,
      prefixCls,
      menuModules,
      handleModuleClick: handleModuleClick,
      activePath,
      childrenMenus: childrenMenus,
      getShowDragBar,
      handleMenuClick,
      getMenuStyle,
      handleClickOutside,
      sideRef,
      dragBarRef,
      shortTitle,
      openMenu,
      getMenuTheme,
      getItemEvents,
      getMenuEvents,
      getDomStyle,
      handleFixedMenu,
      getMixSideFixed,
      getWrapStyle,
      getCollapsed,
      isThemeBright,
    };
  },
});
</script>
<style lang="less">
@prefix-cls: ~'@{namespace}-layout-mix-sider';
@width: 80px;

.@{prefix-cls} {
  position: fixed;
  top: 0;
  left: 0;
  z-index: @layout-mix-sider-fixed-z-index;
  height: 100%;
  overflow: hidden;
  background-color: @sider-dark-bg-color;
  transition: all 0.2s ease 0s;

  &-dom {
    height: 100%;
    overflow: hidden;
    transition: all 0.2s ease 0s;
  }

  &-logo {
    display: flex;
    height: @header-height;
    padding-left: 0 !important;
    justify-content: center;

    img {
      width: @logo-width;
      height: @logo-width;
    }
  }

  &.light {
    .@{prefix-cls}-logo {
      border-bottom: 1px solid rgb(238, 238, 238);
    }

    &.open {
      >.scrollbar {
        border-right: 1px solid rgb(238, 238, 238);
      }
    }

    .@{prefix-cls}-module {
      &__item {
        font-weight: normal;
        color: rgba(0, 0, 0, 0.65);

        &--active {
          color: @primary-color;
          background-color: unset;
        }
      }
    }

    .@{prefix-cls}-menu-list {
      &__content {
        box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.1);
      }

      &__title {
        .pushpin {
          color: rgba(0, 0, 0, 0.35);

          &:hover {
            color: rgba(0, 0, 0, 0.85);
          }
        }
      }
    }
  }

  @border-color: @sider-dark-lighten-bg-color;

  &.dark {
    &.open {
      .@{prefix-cls}-logo {
        // border-bottom: 1px solid @border-color;
      }

      >.scrollbar {
        border-right: 1px solid @border-color;
      }
    }

    .@{prefix-cls}-menu-list {
      background-color: @sider-dark-bg-color;

      &__title {
        color: @white;
        border-bottom: none;
        border-bottom: 1px solid @border-color;
      }
    }

    // 侧边折叠导航彩色模式文字颜色
    &.bright {
      .@{prefix-cls}-module {
        &__item {
          font-weight: normal;
          color: rgba(255, 255, 255, 1);

          &:hover {
            color: rgba(255, 255, 255, 0.8);
          }
        }
      }
    }
  }

  >.scrollbar {
    height: calc(100% - @header-height - 38px);
  }

  &.mini &-module {
    &__name {
      display: none;
    }

    &__icon {
      margin-bottom: 0;
    }
  }

  &-module {
    position: relative;
    padding-top: 1px;

    &__item {
      position: relative;
      padding: 12px 0;
      color: rgba(255, 255, 255, 0.65);
      text-align: center;
      cursor: pointer;
      transition: all 0.3s ease;

      &:hover {
        color: @white;
      }

      // &:hover,
      &--active {
        font-weight: 700;
        color: @white;
        background-color: @sider-dark-darken-bg-color;

        &::before {
          position: absolute;
          top: 0;
          left: 0;
          width: 3px;
          height: 100%;
          background-color: @primary-color;
          content: '';
        }
      }
    }

    &__icon {
      margin-bottom: 8px;
      font-size: 24px;
      transition: all 0.2s;
    }

    &__name {
      margin-bottom: 0;
      font-size: 12px;
      transition: all 0.2s;
    }
  }

  &-trigger {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.65);
    text-align: center;
    cursor: pointer;
    background-color: @trigger-dark-bg-color;
    height: 36px;
    line-height: 36px;
  }

  &.light &-trigger {
    color: rgba(0, 0, 0, 0.65);
    background-color: #fff;
    border-top: 1px solid #eee;
  }

  &-menu-list {
    position: fixed;
    top: 0;
    width: 200px;
    height: calc(100%);
    background-color: #fff;
    transition: all 0.2s;

    &__title {
      display: flex;
      height: @header-height;
      // margin-left: -6px;
      font-size: 18px;
      color: @primary-color;
      border-bottom: 1px solid rgb(238, 238, 238);
      opacity: 0;
      transition: unset;
      align-items: center;
      justify-content: space-between;

      text-align: center;

      .text {
        flex: 1;
      }

      &.show {
        min-width: 130px;
        opacity: 1;
        transition: all 0.5s ease;
      }

      .pushpin {
        margin-right: 6px;
        color: rgba(255, 255, 255, 0.65);
        cursor: pointer;

        &:hover {
          color: #fff;
        }
      }
    }

    .@{namespace}-simple-menu-sub-title {
      font-size: 14px;
    }

    &__content {
      height: calc(100% - @header-height) !important;

      .scrollbar__wrap {
        height: 100%;
        overflow-x: hidden;
      }

      .scrollbar__bar.is-horizontal {
        display: none;
      }

      .ant-menu {
        height: 100%;
      }

      .ant-menu-inline,
      .ant-menu-vertical,
      .ant-menu-vertical-left {
        border-right: 1px solid transparent;
      }
    }
  }

  &-drag-bar {
    position: absolute;
    top: 50px;
    right: -1px;
    width: 1px;
    height: calc(100% - 50px);
    cursor: ew-resize;
    background-color: #f8f8f9;
    border-top: none;
    border-bottom: none;
    box-shadow: 0 0 4px 0 rgba(28, 36, 56, 0.15);
  }
}
</style>
